<template>
  <div class="layout-content">
    <LaptopPreviewer
      v-if="previewMode === 'laptop'"
      :key="'laptop'"
      :preview-mode="previewMode"
      @preview-mode-change="handleModeChange"
    />
    <MobilePreviewer
      v-if="previewMode === 'mobile'"
      :key="'mobile'"
      :preview-mode="previewMode"
      @preview-mode-change="handleModeChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import LaptopPreviewer from './LaptopPreviewer.vue'
import MobilePreviewer from './MobilePreviewer.vue'

import type { PreviewType } from './type'

const previewMode = ref<PreviewType>('laptop')

const handleModeChange = (mode: PreviewType) => {
  console.log(mode)
  previewMode.value = mode
}
</script>
<style scoped>
.layout-content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  flex: 1;
  background-color: var(--color-gray-100);
}
</style>
